<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/isWeixin.js"></script>
	<script type="text/javascript" src="js/flexible.min.js"></script>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="author" content="persona" />
	<link rel="shortcut icon" href="images/eCar_icon.png" type="image/png">
	<title>电信卡福利领取</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<style type="text/css">
		body {font-family: PingFangSC-Regular,Verdana,Arial,"宋体","微软雅黑"; width: 10rem; margin: 0 auto; overflow: hidden; background-color: #F5F5F5;}
		
		.common-one {width: 9.33333333rem; height: 1.06666666rem; border: 0; margin: 0 auto;  border-radius: 0.10666666rem; background:url(images/dxCard_drop.png) no-repeat; background-size: 0.32rem; background-position: 8.8rem center; background-color: #FFF;}
		.common-two {width: 8.64000001rem; height: 1.06666666rem; display: block; background-color: #FFF; border-radius: 0.10666666rem; margin: 0.26666666rem auto 0;}
		.common-three {width: 9.33333333rem; border: 0.02666666rem solid #E8E8E8; border-radius: 0.10666666rem; margin: 0.26666666rem auto 0; background-color: #FFF;}
		.common-four {padding-left: 0.34666666rem; height: 1.06666666rem; display: block; font-size: 14px; line-height: 1.06666666rem; color: #999;}
		.common-four label {padding-left: 0.24rem;}
		.common-four input {display: none;}
		.common-four img {width: 0.42666666rem; height: auto; vertical-align: middle;}
		.common-five {width: 8.77333333rem; margin: 0.26666666rem auto 0.4rem; color: #999; font-size: 12px; line-height: 1.416666;}
		.common-six {width: 9.33333333rem; height: 1.06666666rem; border: 0.02666666rem solid #E8E8E8; background-color: #FFF; margin: 0 auto;  border-radius: 0.10666666rem; margin: 0.26666666rem auto 0;}
		[data-dpr="2"] .common-five {font-size: 24px;}
		[data-dpr="3"] .common-five {font-size: 36px;}
		.text-one {font-size: 16px; color: #333; line-height: 1.06666666rem; text-align: center;}
		[data-dpr="2"] .text-one,[data-dpr="2"] .sure-btn {font-size: 32px;}
		[data-dpr="3"] .text-one,[data-dpr="3"] .sure-btn {font-size: 48px;}
		.text-two {font-size: 14px; width: 9.33333333rem; margin: 0.26666666rem auto 0; color: #333; line-height: 1.42857;}
		.text-three {font-size: 14px; line-height: 1.06666666rem; color: #999;}
		.text-four {font-size: 14px; text-indent: 0.34666666rem; line-height: 1.06666666rem; color: #999;}
		[data-dpr="2"] .text-two,[data-dpr="2"] .text-three,[data-dpr="2"] .text-four,[data-dpr="2"] .common-four,[data-dpr="2"] select,option,input {font-size: 28px;}
		[data-dpr="3"] .text-two,[data-dpr="3"] .text-three,[data-dpr="3"] .text-four,[data-dpr="3"] .common-four,[data-dpr="3"] select,option,input {font-size: 42px;}
		.input-un {border: 0.02666666rem solid #E8E8E8;}
		.input-on {border: 0.02666666rem solid #CCC;}
		select,option,input {padding: 0 0.34666666rem; color: #999; font-size: 14px; line-height: 1.42857;}
		select option {width: 9.33333333rem; display: block; background-color: #3B3940;}
		.sure-btn {width: 9.33333333rem; height: 1.17333333rem; display: block; background-color: #EA4040; border-radius: 0.10666666rem; margin: 0 auto 0.53333333rem; font-size: 16px; text-align: center; line-height: 1.17333333rem; color: #FFF;}
		.select-out {width: 9.33333333rem; height: 1.06666666rem; display: block; margin: 0.26666666rem auto 0; overflow: hidden; position: relative;}
		select {appearance:none; -moz-appearance:none; -webkit-appearance:none;}
		select::-ms-expand { display: none;}
		
		.intro,.receive {overflow: hidden;}
		.receive {display: none;}
		.intro {background-color: #03D097;}
		.intro-banner {width: 10rem; margin: 0 auto; position: relative;}
		.intro-banner :nth-child(1) {position: relative; width: 100%; height: auto;}
		.intro-logo {position: absolute; top: 0.82666666rem; right: 0;}
		.intro-logo :nth-child(1) {width: 2.45333333rem; height: auto;}
		.intro-logo :nth-child(2) {width: 2.72rem; height: auto; margin: 0 0.4rem;}
		.intro-banner :nth-child(3) {position: absolute; width: 100%; height: auto; bottom: 1.76rem;}
		.intro-main {width: 10rem; margin: 0 auto; text-align: center; position: relative; background: url(images/dxCard_back.png) no-repeat; background-size: 3.09333333rem auto; background-position: right 3.49333333rem; font-size: 0;}
		.intro-main :nth-child(1) {width: 3.14666666rem; height: auto; margin-bottom: 0.08rem;}
		.intro-main :nth-child(2),.intro-main :nth-child(4) {width: 9.6rem; height: auto;}
		.intro-main :nth-child(3) {width: 2.50666666rem; height: auto; margin: 0.26666666rem auto 0.24rem;}
		.intro p {width: 9.33333333rem; height: 1.33333333rem; line-height: 1.33333333rem; margin: 0.53333333rem auto; background-color: #FFF; color: #05BB88; font-size: 20px; text-align: center; border-radius: 0.66666666rem;}
		[data-dpr="2"] .intro p {font-size: 40px;}
		[data-dpr="3"] .intro p {font-size: 60px;}
	</style>
</head>
<body>
	<div class="intro">
		<div class="intro-banner">
			<img src="images/dxCard_banner.png" />
			<div class="intro-logo">
				<img src="images/dxCard_elogo.png" />
				<img src="images/dxCard_dxlogo.png" />
			</div>
			<img src="images/dxCard_title.png" />
		</div>
		<div class="intro-main">
			<img src="images/dxCard_spcard.png" />
			<img src="images/dxCard_spmain.png" />
			<img src="images/dxCard_dncard.png" />
			<img src="images/dxCard_dnmain.png" />
		</div>
		<p>点击领取</p>
	</div>
	<div class="receive">
		<p class="common-six text-one">福利领取报名表</p>
		<p class="text-two">姓名*</p>
		<input type="text" class="common-two text-three input-un userName" />
		<p class="text-two">手机号*</p>
		<input type="text" class="common-two text-three input-un phoneNum" />
		<p class="text-two">身份证号码*</p>
		<input type="text" class="common-two text-three input-un idCard" />
		<p class="text-two">选择想要的礼品*</p>
		<div class="common-three">
			<p class="common-four">
				<img src="images/dxCard_on.png" />
				<input class="gift-one" type="radio" value="视频王卡" name="choice" checked>
				<label>视频王卡</label>
			</p>
			<p class="common-four">
				<img src="images/dxCard_un.png" />
				<input class="gift-two" type="radio" value="大牛卡" name="choice">
				<label>大牛卡</label>
			</p>
			<p class="common-four">
				<img src="images/dxCard_un.png" />
				<input class="gift-three" type="radio" value="两种都要" name="choice">
				<label>两种都要</label>
			</p>
		</div>
		<p class="text-two">收件地址*</p>
		<p class="common-six text-four">中国</p>
		<div data-toggle="distpicker"><!-- container -->
			<div class="select-out">
				<select class="common-one input-un province"></select><!-- 省 -->
			</div>
			<div class="select-out">
				<select class="common-one input-un city"></select><!-- 市 -->
			</div>
			<div class="select-out">
				<select class="common-one input-un area"></select><!-- 区 -->
			</div>
		</div>
		<input type="text" class="common-two text-three input-un minuteAdd" placeholder="详细地址" />
		<input type="text" class="common-two text-three input-un postCode" placeholder="邮编" />
		<p class="common-five">说明：以上信息只供中国电信留存和邮寄福利卡使用，绝不会公开或者私用，请大家放心填写</p>
		<p class="sure-btn">提交</p>
		<div class="white-bg"></div>
	</div>

	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="js/distpicker.data.min.js"></script>
	<script type="text/javascript" src="js/distpicker.min.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			function getPersonInfoSucFn(data){
				if(data.code == "0000"){
					}else{
						$("body").css("background-color", "#FFF").html('<p style="text-align: center; background-color: #FFF; color: #000; margin-top: 10%;">请先关注公众号，2s后自动跳转...</p>');
						setTimeout(function(){
							window.location.href = "http://mp.weixin.qq.com/s/m1uwx_yR1QbLfw-GphTe2Q";
						},2000)
					}
			}

			function getSignatureUrlSucFn(data){
				if(data.code == "0000"){
					var config = data.data;
					if(config != undefined && config != null){
						wx.config({
							debug : false,
							appId : config.AppId, // 必填，appID公众号的唯一标识
							timestamp : config.Timestamp, // 必填，生成签名的时间戳
							nonceStr : config.NonceStr, // 必填，生成签名的随机串
							signature : config.Signature,// 必填，签名，见附录1
							jsApiList : [ 'closeWindow' ]
						});
					}
				}
			}

			function playerInfoSucFn(data){
				if(data.code == "0000"){
					warnTip($(".white-bg"),"领取成功，2s后关闭！",2000);
					locTimer = setTimeout(function(){
						clearInterval(locTimer);
							wx.ready(function() {
								wx.closeWindow();
							})
					},2000)
				}else if(data.code == "0014"){
					warnTip($(".white-bg"),"该微信号已领取过！",1500);
				}else {
					warnTip($(".white-bg"),"领取失败！",1500);
				}
			}
			
			function playerInfoErrFn(data){
				warnTip($(".white-bg"),"领取失败！",1500);
			}

			var urlGetPersonInfo = wxAddress+"/weixin/user/getPersonInfo";
			ajaxEncapsulation(urlGetPersonInfo, getPersonInfoSucFn, "", "GET", "true");

			var getSignatureUrl = window.location.href.split('#')[0];
			var urlGetSignatureUrl = wxAddress+"/weixin/sign/getSignature?url="+getSignatureUrl;
			ajaxEncapsulation(urlGetSignatureUrl, getSignatureUrlSucFn, "", "GET", "false");

			$(".intro p").on("click", function(){
				$(".intro").hide();
				$(".receive").show();
				$("html, body").stop().animate( {scrollTop: 0}, "fast");
			})

			$(".common-four").on("click", function(){
				if($(this).find("input").prop("checked")){

				}else{
					$(this).find("input").prop("checked",true);
					$(this).find("img").attr("src","images/dxCard_on.png");
					$(this).siblings().find("img").attr("src","images/dxCard_un.png");
				}
			})

			$(".input-un").on("focus", function(){
				$(this).parents().find(".input-on").removeClass("input-on").addClass("input-un");
				$(this).addClass("input-on").removeClass("input-un");
			})

			$(".sure-btn").on("click", function(){
				var userName = $(".userName").val().trim(),
					phoneNum = $(".phoneNum").val().trim(),
					idCard = $(".idCard").val().trim(),
					giftCard,
					minuteAdd = "中国"+$(".province").val()+$(".city").val()+$(".area").val()+$(".minuteAdd").val().trim(),
					postCode = $(".postCode").val().trim();
				if($(".gift-one").prop("checked")){
					giftCard = $(".gift-one").val();
				}else if($(".gift-two").prop("checked")){
					giftCard = $(".gift-two").val();
				}else if($(".gift-three").prop("checked")){
					giftCard = $(".gift-three").val();
				}

				if(userName == ""){
					warnTip($(".white-bg"),"姓名不能为空！",1000);
					return false;
				}
				if(phoneNum == ""){
					warnTip($(".white-bg"),"手机号不能为空！",1000);
					return false;
				}else if(regs.phoneReg.test(phoneNum)){

				}else {
					warnTip($(".white-bg"),"请输入正确手机号！",1000);
					return false;
				}
				if(idCard == ""){
					warnTip($(".white-bg"),"身份证号不能为空！",1000);
					return false;
				}else if(regs.idCardReg.test(idCard)){

				}else {
					warnTip($(".white-bg"),"请输入正确身份证号！",1000);
					return false;
				}
				if($(".province").val()+$(".city").val()+$(".area").val() == ""){
					warnTip($(".white-bg"),"请选择省市区！",1000);
					return false;
				}
				if($(".minuteAdd").val().trim() == ""){
					warnTip($(".white-bg"),"详细地址不能为空！",1000);
					return false;
				}
				if(postCode == ""){

				}else if(regs.postCodeReg.test(postCode)){

				}else {
					warnTip($(".white-bg"),"请输入正确的邮编或不填写！",1000);
					return false;
				}

				var userMsg = {
					"userName": userName,
					"phoneNum": phoneNum,
					"idCard": idCard,
					"giftCard": giftCard,
					"minuteAdd": minuteAdd,
					"postCode": postCode
				};
				var urlPlayerInfo = wxAddress+"/weixin/campaign/dianxin/playerInfo";
				ajaxEncapsulation(urlPlayerInfo, playerInfoSucFn, playerInfoErrFn, "POST", "true", userMsg, "json", "application/json");
			})
		})
	</script>
</body>
</html>